<template>
    <div class="about">
        <div class="top">
            <div class="tap-nav">
                <div></div>
                <span>特色课</span>
                <svg @click="()=>{this.$router.push('/search')}" t="1598151422651" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2681" width="200" height="200">
                    <path d="M419.612 837.177c98.532 0 191.716-33.906 266.468-96.142l269.084 269.084c7.51 7.51 17.408 11.264 27.307 11.264s19.797-3.755 27.307-11.264c15.132-15.132 15.132-39.595 0-54.613l-268.97-269.198c136.077-163.84 127.43-408.121-26.056-561.608C635.904 45.966 531.115 2.503 419.612 2.503c-111.502 0-216.291 43.463-295.14 122.197-162.701 162.703-162.701 427.464 0 590.166 78.963 78.962 183.752 122.31 295.14 122.31zM179.2 179.427c64.284-64.17 149.618-99.555 240.412-99.555 90.795 0 176.242 35.385 240.413 99.556 132.551 132.55 132.551 348.387 0 480.938-64.285 64.17-149.618 99.556-240.413 99.556S243.484 724.537 179.2 660.366c-132.551-132.665-132.551-348.387 0-480.938z"
                          p-id="2682" fill="#6C6C6C"></path>
                </svg>
            </div>
            <div class="top-classify">
                <ul>
                    <li @click="change(1)" :class="{'change':1===index}">分类 <span></span></li>
                    <li @click="change(2)" :class="{'change':2===index}">排序 <span></span></li>
                    <li @click="change(3)" :class="{'change':3===index}">筛选 <span></span></li>
                </ul>
            </div>

        </div>
        <div class="tc">
            <van-popup @click-overlay="reset" v-model="classifyShow" duration="0.1" position="top">
                <classify @reset="reset"/><!--分了类组件-->
            </van-popup>
            <van-popup @click-overlay="reset" v-model="sortShow" duration="0.1" position="top">
                <Sort @hide="reset"/><!--排序组件-->
            </van-popup>
            <van-popup @click-overlay="reset" v-model="screenShow" duration="0.1" position="top">
                <Screen @cde="reset"/>
            </van-popup>
        </div>
        <div class="wrap">
            <h1 v-if="list.length === 0" style="text-align: center">暂时没有</h1>
            <Excellent v-for="li in list"
                       class="list1"
                       :text="li.title"
                       :people="li.sales_num"
                       :periods="li.total_periods"
                       :date="[li.end_play_date,li.start_play_date]"
                       :name="li.teachers_list[0].teacher_name"
                       :img="li.teachers_list[0].teacher_avatar"
                       :price="li.price"
                       :has_buy="li.has_buy"
                       @click="goToxq(li.id)"
                       :key="li.id"/>
            <p v-if="show" style="text-align: center;">到底了!!!</p>
        </div>
        <div class="icon-top" @click="gotop">
            <svg t="1598784999007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                 p-id="1248" width="200" height="200">
                <path d="M512 0a512 512 0 1 0 512 512 512 512 0 0 0-512-512z m166.912 590.4a16.768 16.768 0 0 1-24.128-0.064L528.896 460.736v308.096a17.088 17.088 0 1 1-34.112 0v-307.2L384.896 573.76a16.768 16.768 0 0 1-24.128 0 17.728 17.728 0 0 1 0-24.704l138.24-141.12a19.968 19.968 0 0 1 12.8-5.44c0.64 0 1.152 0.32 1.728 0.384a16.832 16.832 0 0 1 12.288 5.12l153.152 157.632a17.728 17.728 0 0 1-0.064 24.704z m20.544-222.72H324.224a17.472 17.472 0 0 1 0-34.88h375.232a17.472 17.472 0 0 1 0 34.88z"
                      fill="#F26F73" p-id="1249"></path>
                <path d="M699.456 332.8H324.224a17.472 17.472 0 0 0 0 34.88h375.232a17.472 17.472 0 0 0 0-34.88zM525.824 408.064a16.832 16.832 0 0 0-12.288-5.12c-0.576-0.064-1.088-0.384-1.664-0.384a19.968 19.968 0 0 0-12.864 5.44L360.768 549.12a17.728 17.728 0 0 0 0 24.704 16.768 16.768 0 0 0 24.128 0L494.72 461.568v307.264a17.088 17.088 0 1 0 34.112 0V460.8l125.888 129.6a16.768 16.768 0 0 0 24.128 0 17.728 17.728 0 0 0 0.064-24.64z"
                      fill="#FFFFFF" p-id="1250"></path>
            </svg>
        </div>
    </div>
</template>

<script>
    import Excellent from "../components/home/Excellent";
    import classify from "../components/props/classify";
    import Sort from "../components/props/Sort";
    import Screen from "../components/props/Screen";

    export default {
        name: "About",
        components: {
            Excellent,
            classify,
            Sort,
            Screen
        },
        data() {
            return {
                index: 0,
                classifyShow: false,
                sortShow: false,
                screenShow: false,
                fn: '',
                scroll: 0
            }
        },
        computed: {
            list() {
                return this.$store.state.course.list;
            },
            show() {
                return this.$store.state.course.show
            },
        },
        mounted() {
            this.git()
            this.$store.dispatch('Classify')
            //加载事件
            this.fn = () => {
                if (document.documentElement.scrollHeight - document.documentElement.clientHeight - document.documentElement.scrollTop < 2) {
                    if (this.show) {
                        return
                    }
                    this.$store.commit('pj')
                }
            }

            window.addEventListener('scroll', this.fn)
        },
        methods: {
            //返回顶部
            gotop() {
                var scrollToTop = window.setInterval(function () {
                    var pos = window.pageYOffset;
                    if (pos > 0) {
                        window.scrollTo(0, pos - 20); // how far to scroll on each step
                    } else {
                        window.clearInterval(scrollToTop);
                    }
                }, 3); // how fast to scroll (this equals roughly 60 fps)
            },
            //去详情
            goToxq(id) {
                this.$router.push({
                    path: '/course',
                    query: {
                        id
                    }
                })
            },
            git() {
                this.$store.commit('GETBASISS')
            },
            //触发不同的弹出层
            change(index) {
                this.classifyShow = false
                this.sortShow = false
                this.screenShow = false
                if (this.index === index) {
                    this.index = 0
                    return;
                } else if (index === 1) {
                    this.index = index;
                    this.classifyShow = true;
                } else if (index === 2) {
                    this.index = index;
                    this.sortShow = true;
                } else if (index === 3) {
                    this.index = index;
                    this.screenShow = true;
                }
            },
            //选择确定事件
            reset() {
                this.classifyShow = false
                this.sortShow = false
                this.screenShow = false
                this.index = 0;
            },
        },

        //路由离开守卫,用来释放解除页面滚动监听
        beforeRouteLeave(to,form,next) {
            window.removeEventListener('scroll',this.fn)

            next()
        }
    }
</script>

<style scoped lang="scss">
    .icon-top {
        position: fixed;
        right: 10px;
        bottom: 100px;
        transition: all 1s;

        svg {
            width: 80px;
        }
    }

    .wrap {
        margin-top: 180px;
        margin-bottom: 120px;
    }

    .list1 {
        width: 85%;
        margin: 20px auto;
        padding: 40px 2.5%;
        border-radius: 10px;
    }

    .van-popup--top {
        position: fixed;
        top: 169px;
    }

    .top {
        width: 100%;
        position: fixed;
        top: 0;

        z-index: 999999;
    }

    .tap-nav {
        color: #6C6C6C;
        background-color: #fff;
        line-height: 88px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eee;
        margin-bottom: .5px;

        > span {
            margin-left: 53px;
            font-size: 35px;
        }

        > svg {
            width: 40px;
            height: 40px;
            margin-right: 20px;
        }
    }

    .top-classify {
        background-color: #fff;
        line-height: 80px;
        font-size: 30px;
        margin-top: -2px;

        ul {
            display: flex;
            justify-content: space-around;

            li {
                position: relative;

                > span {
                    width: 0;
                    height: 0;
                    position: absolute;
                    top: 45%;
                    right: -20px;
                    margin-left: 10px;
                    border: {
                        top: 10px solid #000;
                        left: 10px solid transparent;
                        right: 10px solid transparent;
                        bottom: 10px solid transparent;
                    };
                }

                &.change {
                    color: #EB6100;


                    > span {
                        top: 30%;
                        border: {
                            bottom: 10px solid #EB6100;
                            left: 10px solid transparent;
                            right: 10px solid transparent;
                            top: 10px solid transparent;
                        };
                    }
                }
            }
        }
    }
</style>